iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0

今天我們要介紹常用的元件以及各自的屬性。

  • TextView
  • ImageView
  • Button
  • EditText

筆者建議新手,先將程式碼複製貼上,再刪除某一行,去看看手機上的元件有什麼變化

TextView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="300dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true" 
        android:background="@android:color/black"
        android:drawableLeft="@mipmap/ic_launcher"
        android:drawablePadding="10dp"
        android:drawableTint="@android:color/darker_gray"
        android:gravity="center"
        android:maxLength="11"
        android:singleLine="true"
        android:text="我是 TextView"
        android:textColor="@android:color/holo_red_light"
        android:textSize="26dp"
        android:textStyle="bold" />


</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"  // 幫元件取的名稱
        android:layout_width="300dp" // 寬度
        android:layout_height="100dp" // 高度
        android:layout_centerInParent="true" // 放在 parent 的中間
        android:background="@android:color/black" // 背景圖案 or 顏色
        android:drawableLeft="@mipmap/ic_launcher" // 文字左側放一張圖
        android:drawablePadding="10dp" // 文字的該圖的間距
        android:drawableTint="@android:color/darker_gray" // 該圖改變的顏色
        android:gravity="center" // 元件內容在元件內部的位置
        android:maxLength="11" // 最大字數為 11
        android:singleLine="true" // 是否為單行內容
        android:text="我是 TextView" // 內容
        android:textColor="@android:color/holo_red_light" // 文字顏色
        android:textSize="26dp" // 文字大小
        android:textStyle="bold" /> // 文字字型

</RelativeLayout>

效果


ImageView

其他屬性大致和上述 TextView 相同,可以試試看

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@android:color/black" // 背景
        android:src="@drawable/abc_vector_test" /> // 圖片

</RelativeLayout>

Button

屬性大致和上述 TextView 相同,可以試試看

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@android:color/black"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="center"
        android:padding="10dp"
        android:text="我是 Button"
        android:textColor="@android:color/holo_blue_bright"
        android:textSize="26dp"
        android:textStyle="bold" />

</RelativeLayout>

EditText

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@android:color/black"
        android:digits="1234567890qwertyuiopasdfghjklzxcvbnm"
        android:drawableLeft="@mipmap/ic_launcher"
        android:gravity="center"
        android:hint="我是個提示"
        android:inputType="number"
        android:padding="10dp"
        android:textColor="@android:color/black"
        android:textColorHint="@android:color/holo_blue_bright"
        android:textSize="26dp"
        android:textStyle="bold" />

</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"  // 對齊 parent 中心
        android:background="@android:color/black" // 背景 黑色
        android:digits="1234567890qwertyuiopasdfghjklzxcvbnm" // 只能輸入這些字元
        android:drawableLeft="@mipmap/ic_launcher" // 左側圖
        android:gravity="center" // 內容在元件的中心
        android:hint="我是個提示" // 未打字時,顯示的提示
        android:inputType="number" // 彈出的鍵盤格式
        android:padding="10dp" // 內容與元件邊框的間距
        android:textColor="@android:color/black" // 文字顏色
        android:textColorHint="@android:color/holo_blue_bright" // 提示文字的顏色
        android:textSize="26dp" // 字體大小
        android:textStyle="bold" /> // 字型

</RelativeLayout>


基本上用法大同小異

筆者認為,學習的時候,可以問自己希望呈現什麼效果,再上網查詢,或是歡迎留言討論。

接下來幾天我們要做兩件事情

  • 學習如何用程式碼,動態改變這些元件的屬性。
  • 學習較困難的元件。

上一篇
Day6 - RelativeLayout + ConstraintLayout 佈局使用
下一篇
Day8 - Android App 動態改變元件屬性
系列文
菜雞 Android APP 從安裝 Android Studio 到上架 Google Play30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言